const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    // 入口 和 出口
    // webpack ./src/main.js ./dist/bundle.js 命令 转换为以下配置项
    entry: path.resolve('./src/main.js'),
    output: {
        path: path.resolve('./dist'),
        filename: 'bundle.js'
    },

    // 插件
    plugins: [
        // 构建前 清空 dist 文件夹 插件
        new CleanWebpackPlugin(),
        // HTML 输出 配置
        new HtmlWebpackPlugin({
            template: path.resolve('./src/index.html'),
            filename: 'index.html'
        }),
        // vue-loader plugin
        // 作用：将在 module 中 定义过的其它规则复制并应用到 .vue 文件里相应语言的块。
        // 例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块
        new VueLoaderPlugin()
    ],
    // 模块
    module: {
        rules: [
            // css
            {
                test: /\.css$/,
                // 调用时按照 从右至左 的顺序调用
                use: ['style-loader', 'css-loader']
            },
            // scss
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            // less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            // image
            {
                test: /\.(jpg|jpeg|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name]-[hash:8].[ext]', // 重命名
                            limit: 50 * 1024 // 单位：byte；小于 此值的 会被转为 base64
                        }
                    }
                ]
            },
            // font
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 0 // 单位：byte；小于 此值的 会被转为 base64
                        }
                    }
                ]
            },
            // js - ES6 babel 转换
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, // 排除 不需要 处理的 文件
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: [
                            '@babel/plugin-proposal-class-properties'
                        ]
                    }
                }
            },
            // vue
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}
